<template>
	<view class="content">
		<view class="picker">
			<view class=" flex flex-between">
				<view class="flex flex-column" style="flex: 1;">
					<view class="title">开始充电时间</view>
					<view class="date">
						<DateTimePicker :mode="mode" @onChange="onChangeStartDate" />
					</view>
				</view>
				<view class="flex flex-column" style="flex: 1;">
					<view class="title">结束充电时间</view>
					<view class="date">
						<DateTimePicker :mode="mode" @onChange="onChangeEndDate" />
					</view>
				</view>
			</view>
			
			<view class="stop flex">
				<u-checkbox v-model="formData.autoStop" activeValue="1" inactiveValue="0" activeColor="#42E0A2" label="充满自停"></u-checkbox>
			</view>
		</view>
		
		<!-- 重复周期选择部分 -->
		<view class="repeat-section">
			<view class="repeat-title">重复周期</view>
			<view class="repeat-types">
				<view 
					class="repeat-type-btn" 
					:class="{ active: formData.scheduleType === 1 }"
					@click="selectRepeatType(1)"
				>单次</view>
				<view 
					class="repeat-type-btn" 
					:class="{ active: formData.scheduleType === 2 }"
					@click="selectRepeatType(2)"
				>每天</view>
				<view 
					class="repeat-type-btn" 
					:class="{ active: formData.scheduleType === 3 }"
					@click="selectRepeatType(3)"
				>自定义</view>
			</view>
		
			<!-- 星期选择器 -->
			<view class="weekday-selector" v-if="formData.scheduleType === 3">
				<view 
					v-for="(day, index) in weekdays" 
					:key="index"
					class="weekday-btn"
					:class="{ active: formData.weekDays.includes(index) }"
					@click="toggleWeekday(index)"
				>{{ day }}</view>
			</view>
		
			<view class="hint-text">预约每天有效</view>
		</view>
		
		<view class="flex" @click="submit" style="justify-content: center;margin-top: 60rpx;">
			<view class="button">保存</view>
		</view>
	</view>
</template>

<script>
	import { isEmpty } from '../../../../utils';
import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
	export default {
		components: {
			DateTimePicker
		},
		data() {
			return {
				startDate: '2022-02-04',
				endDate: '',
				mode: 6,
				repeatType: 'once', // 'once', 'daily', 'custom'
				weekdays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				formData: {
					terminalId: '', 		 // 终端编号
					gunCode: '',    		 // 枪号
					singleStartTime: '', // 开始时间
					singleEndTime: '',   // 结束时间 
					scheduleType: 1,     // 1单次 2 每天 3 自定义
					autoStop: 0,				 // 1 充满自停
					weekDays: []
				}
			}
		},
		onLoad({ terminalId, gunCode }) {
			this.formData.terminalId = terminalId;
			this.formData.gunCode = gunCode;
		},
		methods: {
			onChangeStartDate(e) {
				this.formData.singleStartTime = e.join(':');
			},
			onChangeEndDate(e) {
				this.formData.singleEndTime = e.join(':');
			},
			selectRepeatType(type) {
				this.formData.scheduleType = type;
			},
			toggleWeekday(index) {
				const position = this.formData.weekDays.indexOf(index);
				if (position === -1) {
					this.formData.weekDays.push(index);
				} else {
					this.formData.weekDays.splice(position, 1);
				}
			},
			submit() {
				const data = JSON.parse(JSON.stringify(this.formData));
				if (isEmpty(data.singleStartTime) || isEmpty(data.singleEndTime)) {
					return uni.$u.toast('请选择充电时间');
				}
				if (data.scheduleType == 3 && data.weekDays.length == 0) {
					return uni.$u.toast('请选择重复周期');
				}
				this.$http_api.reservationMinePile(data).then(res => {
					uni.$u.toast('保存成功！')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx;
	}
	
	.picker {
		background: #fff;
		border-radius: 28rpx;
		overflow: hidden;
	}
	
	.date {
		flex: 1;
		width: 90%;
	}
	
	.title {
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		font-family: "PINGFANG";
		padding-top: 20rpx;
	}
	
	.stop {
		padding: 40rpx 40rpx;
	}
	
	.repeat-section {
		padding: 20rpx 40rpx;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 28rpx;
		
		.repeat-title {
			font-size: 32rpx;
			color: #333;
			font-family: "PINGFANG";
			margin-bottom: 20rpx;
		}
		
		.repeat-types {
			display: flex;
			gap: 20rpx;
			margin-bottom: 30rpx;
			
			.repeat-type-btn {
				flex: 1;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f5f5f5;
				border-radius: 40rpx;
				color: #666;
				font-size: 28rpx;
				font-family: "PINGFANG";
				
				&.active {
					background: #42E0A2;
					color: #fff;
				}
			}
		}
		
		.weekday-selector {
			display: flex;
			gap: 16rpx;
			margin-bottom: 30rpx;
			
			.weekday-btn {
				flex: 1;
				height: 70rpx;
				width: 70rpx;
				flex: none;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid #eee;
				border-radius: 50%;
				color: #666;
				font-size: 24rpx;
				font-family: "PINGFANG";
				
				&.active {
					background: #42E0A2;
					border-color: #42E0A2;
					color: #fff;
				}
			}
		}
		
		.hint-text {
			font-size: 24rpx;
			color: #000;
			font-family: "PINGFANG";
			margin-top: 40rpx;
		}
	}
	
	.button {
		background: #7BDEB5;
		width: 90%;
		padding: 20rpx 10rpx;
		border: none;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: white;
		cursor: pointer;
		font-family: "PINGFANG";
		text-align: center;
	}
</style>